﻿<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/Resource/js/fe.head.js")
</head>

<body>
    <div id="app" v-cloak>
        <div class="edit_pagecontainer">
            <div class="edit_formcontainer">
                <el-form ref="form" :model="form" :label-width="labelWidth" :rules="rules">
                    <el-form-item label="名称" prop="FieldName">
                        <el-input v-model="form.FieldName"></el-input>
                    </el-form-item>
                    <el-form-item label="字段名" prop="SQLFieldName">
                        <el-input v-model="form.SQLFieldName" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="类型">
                        <template>
                            <el-select v-model="form.FieldType" placeholder="请选择" v-on:change="changeType($event)"
                                :disabled="true">
                                <el-option v-for="item in fieldTypeList" :key="item.value" :label="item.label"
                                    :value="item.value" :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <el-form-item label="控件类型">
                        <template>
                            <el-select v-model="form.Control" placeholder="请选择" v-on:change="changeControl($event)">
                                <el-option v-for="item in controlList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                    <el-form-item label="绑定代码项" v-show="form.Control=='dropdownlist'">
                        <el-select v-model="form.BindCodeGuid" placeholder="请选择">
                            <el-option v-for="item in codeList" :key="item.RowGuid" :label="item.CodeName"
                                :value="item.RowGuid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="长度">
                        <el-input v-model="form.FieldLength" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="form.OrderNum"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="edit_opcontainer">
            <el-button type="primary" v-on:click="handleSubmit">保 存</el-button>
            <el-button v-on:click="close">取 消</el-button>
        </div>
    </div>
</body>
@Scripts.Render("~/Resource/js/fe.foot.js")
@Scripts.Render("~/Resource/component/tree/index.js")
<script>
    var codeUrl = GetRootPath() + "Frame/CodeMain/FindAll";
    var detailUrl = GetRootPath() + "Frame/Column/FindDetail";
    var updateUrl = GetRootPath() + "Frame/Column/OperateUpdate";
    var pageData = {
        //data
        form: {


        },
        codeList: [],
        rules: {
            FieldName: [{
                    required: true,
                    message: '请输名称',
                    trigger: 'blur'
                },

            ],
            SQLFieldName: [{
                    required: true,
                    message: '请输入字段名',
                    trigger: 'blur'
                },

            ],

        },
        fieldTypeList: [{
            value: 'nvarchar',
            label: '字符串（nvarchar）'
        }, {
            value: 'blob',
            label: '文件（blob)'
        }, {
            value: 'longtext',
            label: '大文本（longtext)'
        }, {
            value: 'int',
            label: '整数（int）'
        }, {
            value: 'numeric',
            label: '数字（numeric）'
        }, {
            value: 'datetime',
            label: '时间（datetime）'
        }],
        controlList: [{
                value: 'input',
                label: '文本框'
            }, {
                value: 'upload',
                label: '上传控件'
            }, {
                value: 'webeditor',
                label: '文本编辑器'
            }, {
                value: 'intinput',
                label: '整数文本框'
            }, {
                value: 'numericinput',
                label: '数字文本框'
            }, {
                value: 'datepicker',
                label: '时间控件'
            },
            {
                value: 'dropdownlist',
                label: '下拉控件'
            }
        ],
        //css
        labelWidth: '100px'
    };

    new Vue({
        el: '#app',
        data: pageData,
        mounted: function () {
            this.bindDetail();
            this.bindCode();
        },
        methods: {
            bindDetail: function () {
                var data = {
                    RowGuid: GetUrlParam("RowGuid")
                }
                JsonAjaxPost(detailUrl, JSON.stringify(data), function (data,
                    status) {
                    if (data.code == 0) {
                        pageData.form = data.data
                    }
                })
            },
            handleSubmit: function () {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        JsonAjaxPost(updateUrl, JSON.stringify(pageData.form), function (data,
                            status) {
                            if (data.code == 0) {
                                OpenSuccess('提示', '保存成功！', function () {
                                    CloseDialog(null, 'columnedit');
                                })
                            } else {
                                OpenFail('提示', data.msg)
                            }
                        })
                    }
                });
            },
            close: function () {
                CloseDialog(null, 'columnedit');
            },
            changeType: function (type) {
                var form = pageData.form
                switch (type) {
                    case "nvarchar":
                        form.FieldLength = 50
                        form.Control = 'input'
                        break;
                    case "numeric":
                        form.FieldLength = 2
                        form.Control = 'numericinput'
                        break;
                    case "int":
                        form.FieldLength = 11
                        form.Control = 'intinput'
                        break;
                    case "datetime":
                        form.FieldLength = 0
                        form.Control = 'datepicker'
                        break;
                    case "longtext":
                        form.FieldLength = 0
                        form.Control = 'webeditor'
                        break;
                    case "blob":
                        form.FieldLength = 0
                        form.Control = 'upload'
                        break;
                }
                Vue.set(pageData, "form", form);
            },
            changeControl: function (type) {
                var form = pageData.form
                if (type != "dropdownlist") {
                    form.BindCodeGuid = ''
                }
                Vue.set(pageData, "form", form);

            },
            bindCode: function () {
                var data = {

                }
                JsonAjaxPost(codeUrl, JSON.stringify(data), function (result, status) {
                    Vue.set(pageData, "codeList", result.data);
                })
            }
        }
    })
</script>

</html>
